<template>
	<view>
		<s-layout :onShareAppMessage="shareInfo">
			<!-- 标题栏 -->
			<!-- <detailNavbar /> -->
			<!-- 骨架屏 -->
			<detailSkeleton v-if="state.skeletonLoading" />
			<!-- 下架/售罄提醒 -->
			<s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
				actionText="再逛逛" actionUrl="/pages/goods/list" />
			<block v-else>
				<view class="detail-swiper-selector">
					<!-- 商品轮播图  -->
					<su-swiper class="ss-m-b-14" isPreview :list="state.goodsSwiper" dotStyle="tag" imageMode="widthFix"
						dotCur="bg-mask-40" :seizeHeight="750" />

					<view class="title-box">
						<view class="title-box-t">米其林汽车轮胎</view>
						<view class="title-box-c">
							<text class="title-box-c-1">系列：</text>
							<text class="title-box-c-2">数字形象</text>
							<text class="title-box-c-1">限量/</text>
							<text class="title-box-c-2">50000</text>
						</view>
					</view>

					<view class="author-box">
						<image src="@/static/img/home-icon-9.png"></image>
						<view class="author-box-r">
							<view class="author-box-r-1">放行方</view>
							<view class="author-box-r-2">九丝城宇宙</view>
						</view>
					</view>

					<view class="collect-box">
						<view class="collect-box-nav">
							<view class="collect-box-nav-item active">集售信息</view>
							<view class="collect-box-nav-item">集售历史</view>
						</view>
						<view class="collect-box-info">
							<view class="collect-box-info-item">
								<view class="collect-box-info-item-1">起始价格</view>
								<view class="collect-box-info-item-2">500.00</view>
							</view>
							<view class="collect-box-info-item">
								<view class="collect-box-info-item-1">价格幅度</view>
								<view class="collect-box-info-item-2">±1.20%</view>
							</view>
							<view class="collect-box-info-item">
								<view class="collect-box-info-item-1">开始时间</view>
								<view class="collect-box-info-item-2">2024-01-01 11:10:02</view>
							</view>
						</view>
						<view class="collect-box-rule">
							<view class="collect-box-rule-t">集售规则</view>
							<view class="collect-box-rule-c">
								<view class="collect-box-rule-c-t">1、当前藏品目前处于孵化阶段，用户最多可持有40份，拆配价为1500元;</view>
								<view class="collect-box-rule-c-t">
									<text>2:交易时间:可挂单时间0:05一12:00，可购...</text>
									<text class="collect-box-rule-c-tb">展开</text>
								</view>
							</view>
						</view>
					</view>

					<view class="product-box">
						<view class="product-box-nav">
							<view class="product-box-nav-item active">商品详情</view>
							<view class="product-box-nav-item">权益介绍</view>
						</view>
						<view class="product-box-c">
							<image mode="widthFix" src="@/static/img/pro-icon-1.png"></image>
						</view>
					</view>

					<!-- 弹框 -->
					<s-choose-buy :goodsInfo="state.goodsInfo" :show="state.showChooseBuy" @addCart="onAddCart"
						@buy="onBuy" @change="onBuyChange" @close="state.showChooseBuy = false" />
				</view>
				<!-- 详情tabbar -->
				<detail-tabbar v-model="state.goodsInfo">
					<view class="detail-tabbar-slot">
						<view class="detail-tabbar-slot-t">
							<view class="detail-tabbar-slot-t1">¥</view>
							<view class="detail-tabbar-slot-t2">500.00</view>
						</view>
						<view class="detail-tabbar-slot-b">
							<button class="ss-reset-button sold-btn ui-Shadow-Main" @tap="state.showChooseBuy = true">
								出售
							</button>
							<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showChooseBuy = true">
								购买
							</button>
						</view>
					</view>
				</detail-tabbar>
			</block>
		</s-layout>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		formatSales,
		formatGoodsSwiper,
		formatPrice
	} from '@/sheep/hooks/useGoods';
	import detailNavbar from './components/detail/detail-navbar.vue';
	import detailCellSku from './components/detail/detail-cell-sku.vue';
	import detailCellService from './components/detail/detail-cell-service.vue';
	import detailCellParams from './components/detail/detail-cell-params.vue';
	import detailTabbar from './components/detail/detail-tabbar.vue';
	import detailSkeleton from './components/detail/detail-skeleton.vue';
	import detailCommentCard from './components/detail/detail-comment-card.vue';
	import detailContentCard from './components/detail/detail-content-card.vue';
	import detailActivityTip from './components/detail/detail-activity-tip.vue';
	import {
		isEmpty
	} from 'lodash';

	// import detailActivityTip from './components/detail/detail-activity-tip.vue';
	// import detailTab from './components/detail/detail-tab.vue';
	// import detailCoupon from './components/detail/detail-coupon.vue';
	onPageScroll(() => {});

	const state = reactive({
		goodsId: 0,
		skeletonLoading: true,
		goodsInfo: {},
		showChooseBuy: false,
		goodsSwiper: [],
		selectedSkuPrice: {},
		showModel: false,
		total: 0,
		couponInfo: [],
		showActivityModel: false,
		activityInfo: [],
	});

	// 规格变更
	function onSkuChange(e) {
		state.selectedSkuPrice = e;
	}

	// 添加购物车
	function onAddCart(e) {
		sheep.$store('cart').add(e);
	}

	function onDetail(e) {
		sheep.$router.go('/pages/goods/list');
	}

	// 立即购买
	function onBuy(e) {
		sheep.$router.go('/pages/order/confirm', {
			data: JSON.stringify({
				order_type: 'goods',
				goods_list: [{
					goods_id: e.goods_id,
					goods_num: e.goods_num,
					goods_sku_price_id: e.id,
				}, ],
			}),
		});
	}
	//营销活动
	function onActivity() {
		state.activityInfo = state.goodsInfo.promos;
		state.showActivityModel = true;
	}

	//立即领取
	async function onGet(id) {
		const {
			code,
			msg
		} = await sheep.$api.coupon.get(id);
		if (code === 1) {
			uni.showToast({
				title: msg,
			});
			setTimeout(() => {
				getCoupon();
			}, 1000);
		}
	}

	const shareInfo = computed(() => {
		if (isEmpty(state.goodsInfo)) return {};
		return sheep.$platform.share.getShareInfo({
			title: state.goodsInfo.title,
			image: sheep.$url.cdn(state.goodsInfo.image),
			desc: state.goodsInfo.subtitle,
			params: {
				page: '2',
				query: state.goodsInfo.id,
			},
		}, {
			type: 'goods', // 商品海报
			title: state.goodsInfo.title, // 商品标题
			image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
			price: state.goodsInfo.price[0], // 商品价格
			original_price: state.goodsInfo.original_price, // 商品原价
		}, );
	});

	onLoad(async (options) => {
		// 非法参数
		if (!options.id) {
			state.goodsInfo = null;
			return;
		}
		state.goodsId = options.id;
		// 加载商品信息
		sheep.$api.goods.detail(state.goodsId).then((res) => {
			state.skeletonLoading = false;
			if (res.code === 1) {
				state.goodsInfo = res.data;
				state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
			} else {
				// 未找到商品
				state.goodsInfo = null;
			}
		});
		const {
			code,
			data
		} = await sheep.$api.coupon.listByGoods(state.goodsId);
		if (code === 1) {
			state.couponInfo = data;
		}
	});
</script>

<style lang="scss" scoped>
	@mixin flex($align-item:center,$justify-content:space-between) {
	  display: flex;
	  align-items: $align-item;
	  justify-content: $justify-content;
	}

	.detail-card {
		background-color: $white;
		margin: 14rpx 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.title-box{
		margin: 30rpx;
		background: #1C1C1E;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		.title-box-t{

			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
		}
		.title-box-c{
			margin-top: 20rpx;
			.title-box-c-1{

				font-weight: 400;
				font-size: 28rpx;
				color: #939393;
			}
			.title-box-c-2{

				font-weight: 400;
				font-size: 28rpx;
				color: #13C093;
				margin-right: 30rpx;
			}
		}
	}
	.author-box{
		margin: 30rpx;
		background: #1C1C1E;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		@include flex(center, none);
		image{
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		.author-box-r{
			.author-box-r-1{

				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.author-box-r-2{
				margin-top: 10rpx;

				font-weight: 400;
				font-size: 20rpx;
				color: #888888;
			}
		}
	}
	.collect-box{
		margin: 30rpx;
		background: #1C1C1E;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		.collect-box-nav{
			@include flex(center, none);
			.collect-box-nav-item{
				margin-right: 40rpx;

				font-weight: 400;
				font-size: 36rpx;
				color: #767676;
			}
			.active{
				color: #FFFFFF;
			}
		}
		.collect-box-info{
			margin-top: 30rpx;
			.collect-box-info-item{
				@include flex();
				margin-bottom: 20rpx;
				.collect-box-info-item-1{

					font-weight: 300;
					font-size: 28rpx;
					color: #939393;
				}
				.collect-box-info-item-2{

					font-weight: 300;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
		.collect-box-rule{
			.collect-box-rule-t{

				font-weight: 300;
				font-size: 28rpx;
				color: #939393;
			}
			.collect-box-rule-c{
				line-height: 180%;

				font-weight: 300;
				font-size: 24rpx;
				color: #FFFFFF;
				.collect-box-rule-c-t{
					margin-top: 30rpx;
					.collect-box-rule-c-tb{
						color: #13C093;
					}
				}
			}
		}
	}
	.product-box{
		margin: 30rpx;
		background: #1C1C1E;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		.product-box-nav{
			@include flex(center, none);
			.product-box-nav-item{
				margin-right: 40rpx;

				font-weight: 400;
				font-size: 36rpx;
				color: #767676;
			}
			.active{
				color: #FFFFFF;
			}
		}
		.product-box-c{
			margin-top: 30rpx;
			image{
				width: 100%;
			}
		}
	}

	.detail-tabbar-slot{
		width: 100%;
		@include flex();
		.detail-tabbar-slot-t{
			@include flex(baseline,none);
			.detail-tabbar-slot-t1{

				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.detail-tabbar-slot-t2{

				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
			}
		}
		.detail-tabbar-slot-b{
			@include flex(center, none);
			.sold-btn{
				width: 180rpx;
				height: 75rpx;
				border-radius: 38rpx;
				border: 2px solid #FFFFFF;
				text-align: center;
				line-height: 75rpx;

				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.buy-btn{
				width: 180rpx;
				height: 75rpx;
				background: linear-gradient(90deg, #45C9F0, #36F6AF);
				border-radius: 38rpx;
				text-align: center;
				line-height: 75rpx;

				font-weight: 500;
				font-size: 32rpx;
				color: #090909;
				margin-left: 20rpx;
			}
		}
	}
</style>
